<template>
  <div class="store-brief page">
    <div class="nav-bar">
      <van-nav-bar title="店铺介绍" class="bg_sdetail" left-text="返回" left-arrow fixed @click-left="$router.go(-1)"></van-nav-bar>
    </div>
    <div class="content" ref="webview">
      <div class="nodata" style="max-height:300px" v-if="!storeInfo">暂无数据</div>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-if="storeInfo">
        <template>
            <!-- 轮播图s -->
            <div class="carousel_div">
              <wt-carousel :options="carousel_option">
                <div class="carousel-item" v-for="(item,index) of swiperList" :key="index"><img :src="item" @click="swiperimgPreview(index)"></div>
              </wt-carousel>
            </div>
            <!-- 轮播图e -->
            <div class='storedetail_div'>
                <div class="storeDetail">
                    <p class="store_name">{{storeInfo.shop_name}}</p>
                    <p class="star"><van-rate v-model="storeInfo.star_num" color="#FAB93C" readonly size="16px" allow-half /><span>{{storeInfo.star_num}}（{{storeInfo.eval_num}}个评价）</span></p>
                </div>
                <div class="nav_div" @click="goToMapDetail"><img src="/static/img/store/brief/nav_icon.png" alt="">导航</div>
            </div>
            <div class="store_brief overflow-line" v-html="storeInfo.shop_info"></div>
            <span class="check_more" v-if="enoughLength" @click="checkAction($event)">查看更多</span>
            <div class="storeimg_div">
              <div class="storeimg_title"><span>体验店图片</span></div>
              <div class="img_list">
                <ul>
                  <li v-for="(item,index) of storeImgList" :key="index"><img :src="item" alt="" @click="imgPreview(index)"></li>
                </ul>
              </div>
            </div>
            <div class="map" @click="goToMapDetail">
              <p class="map_title">地理位置</p>
              <p class="map_address">{{storeInfo.address}}</p>
              <img class="point" src="/static/img/store/detail/local_point.png" alt="">
              <div id="allmap" class="map_img"></div>
            </div>
            <div class="pay_now" @click="goToGoodsList">去购买</div>
        </template>
      </van-pull-refresh>
    </div>
    <tab-bar v-model="isActive"></tab-bar>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
import { bd09_to_gcj02 } from '@/utils/pointtransfrom';
import BMap from 'BMap';
import { ImagePreview } from 'vant';
export default {
  name: 'storeDetail',
  data () {
    return {
      isDescStatus: true,
      enoughLength: false,
      checkMore: true,
      carousel_option: {
        auto: true,
        loop: true,
        pagination: false,
        time: 3000
      },
      isActive: 2,
      apiUrl: 'storeDetail',
      storeId: this.$route.query.id,
      params: {
        id: this.$route.query.id
      },
      one_cate_id: 35,
      appid: '',
      storeInfo: {},
      shop_info: '',
      swiperList: [],
      storeImgList: [],
      imgshow: false,
      imgindex: 0
    };
  },
  mixins: [mixins],
  created () {
    this.getList(this.apiUrl, true);
    this.getStoreDetail();
  },
  watch: {
    shop_info(val) {
      if (this.shop_info.length > 25) {
        this.enoughLength = true;
      }
    }
  },
  methods: {
    swiperimgPreview(index) {
      ImagePreview({
        images: this.swiperList,
        startPosition: index
      });
    },
    imgPreview(index) {
      ImagePreview({
        images: this.storeImgList,
        startPosition: index
      });
    },
    checkAction(e) {
      let el = e.currentTarget;
      el.previousElementSibling.classList[!this.isDescStatus ? 'add' : 'remove']('overflow-line');
      el.innerHTML = !this.isDescStatus ? '查看更多' : '收起';
      this.isDescStatus = !this.isDescStatus;
      this.enoughLength = true;
    },
    goToGoodsList() {
      this.$router.push({ 'path': '/mall/list', query: { ocid: this.one_cate_id } });
    },
    goDetails (id) {
      this.$router.push({ 'path': '/storedetail', query: { id: id } });
    },
    getStoreDetail() {
      let that = this;
      that.$API.store.storeDetail(that.params).then(res => {
        if (res.code === 0) {
          // console.log(res.data);
          that.storeInfo = res.data;
          that.shop_info = res.data.shop_info;
          that.appid = res.data.appid; // 获得appid
          let temp_arr1 = res.data.shop_imgs.split(',');
          let temp_arr2 = res.data.shop_head_img.split(',');
          // 接口数据有误,暂用静态数据
          that.storeImgList = temp_arr1;
          that.swiperList = temp_arr2;
          that.getStoreLocation(that.storeInfo.lng, that.storeInfo.lat);
          that.isLoading = false;
        }
      });
    },
    getStoreLocation(lng, lat) {
      // 百度地图API功能
      var map = new BMap.Map('allmap');
      var points = new BMap.Point(lng, lat);
      map.centerAndZoom(points, 30);
      map.enableScrollWheelZoom(true);
      map.clearOverlays();
      var marker = new BMap.Marker(points); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中
      map.panTo(points);
    },
    goToMapDetail() {
      let that = this;
      let huoxing_arr = bd09_to_gcj02(that.storeInfo.lng, that.storeInfo.lat);
      let map_info = {};
      map_info.lng = parseFloat(huoxing_arr[0]);
      map_info.lat = parseFloat(huoxing_arr[1]);
      map_info.shop_name = that.storeInfo.shop_name;
      map_info.address = that.storeInfo.address;
      map_info.appid = that.appid;
      localStorage.setItem('map_info', JSON.stringify(map_info));
      this.$router.push({ 'path': '/store/map' });
    }
  }
};
</script>
<style lang="less" scoped>
::-webkit-scrollbar{
  display: none;
  height:0;
}
.store-brief {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .content{
    padding-bottom: 150px;
  }
  .fav_icon{
      width:40px;
  }
  .storedetail_div{
    padding:30px 30px 10px 30px;
    width:100%;
    display: flex;
    .storeDetail{
      width:85%;
      display: flex;
      align-items: center;
      flex-wrap:wrap;
      .store_name{
        color:#464646;
        font-size: 35px;
        width:100%;
        .tag{
          color:#EC905E;
          border:1px solid #E5F4FF;
          border-radius: 30px;
          text-align:center;
          height:30px;
          line-height: 40px;
          padding:5px 10px;
          font-size: 25px;
          margin-left:10px;
        }
    }
    .star{
      margin: 15px 0;
      display: flex;
      align-items: center;
      span{
        color:#969696;
        margin-left: 15px;
        font-size: 25px;
      }
    }
  }
  .nav_div{
    width:15%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color:#ccc;
    font-size: 25px;
    img{
        width:35px;
    }
  }
  }
  .store_brief{
    text-indent:20px;
    padding:0 30px 0 30px;
    color:#858585;
    font-size: 25px;
  }
  .check_more{
    margin-right: 30px;
    float: right;
    border-bottom: 1px solid #02827E;
    color:#02827E;
    font-size: 25px;
    padding-bottom:5px;
  }
  .overflow-line{
    overflow: hidden;
    text-overflow: ellipsis;
    height: 30px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .storeimg_div{
    width:100%;
    padding-left:30px;
    box-sizing: border-box;
    .img_list{
      overflow-x:scroll;
      overflow-y: hidden;
      width:100%;
      ul{
        float:left;
        display: flex;
        flex-wrap:nowrap;
      }
      li{
        height: 170px;
        overflow: hidden;
        width:200px;
        margin-right: 20px;
      }
      img{
        width:100%;
        min-height: 100%;
      }
    }
    .storeimg_title{
      font-weight: bold;
      width:100%;
      position: relative;
      height:50px;
      font-size: 28px;
      display: flex;
      color: #464646;
      align-items: center;
      justify-content: space-between;
    }
  }
  .map{
    margin:20px 30px;
    position: relative;
    height:auto;
    .map_title{
      position: absolute;
      left:20px;
      top:20px;
      color:#807B77;
      font-size: 35px;
      font-weight: bold;
      z-index: 999;
    }
    .map_address{
      position: absolute;
      left:20px;
      bottom:20px;
      color:#6B625D;
      font-size: 20px;
      z-index: 999;
    }
    .point{
      position: absolute;
      right:30px;
      top:50%;
      transform: translate(0,-50%);
      width:70px;
      z-index: 999;
    }
    .map_img{
      width:100%;
      height:130px;
      border-radius: 8px;
      box-shadow:0 0 50px rgba(85, 95, 98, 0.1);
    }
  }
  .pay_now{
    background: #FFBC42;
    margin:10px 30px;
    text-align: center;
    height:80px;
    line-height: 80px;
    color:#fff;
    font-size: 32px;
  }
}
</style>
